<template>
    <div class="content">
        <!--<div class="clearfix">
            <Form class="f-fl" inline :label-width="5">
                <FormItem>
                    <Input
                        v-model="params.examName"
                        placeholder="考试名称"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="queryList">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button @click="clearSearch">清空</Button>
                </FormItem>
            </Form>

        </div>-->
        <Row :gutter="32">
            <Col :span="8" style="margin-bottom:32px" v-for="(item,index) in list" :key="index">
            <Card :class="'bg'+index" >
                <Row class="pt60 pb10 bg-card">
                    <Col align="middle" class="fw" :span="24">{{item.qpName}}</Col>
                </Row>
                <Row>
                    <Col :span="18">
                    <div class="f14">用时：{{item.answerTime}}</div>
                    <div class="f14">得分：{{item.totalScore}}</div>
                    <div class="f14">最近练习：{{item.recentTime}}</div>
                    </Col>
                    <Col :span="6">
                    <Button align="bottom" type="primary" class="mt10" @click="goStart(item)">练习</Button>
                    </Col>
                </Row>

            </Card>
            </Col>

        </Row>

        <Pagination
            :pageSize.sync="params.pageSize"
            :current.sync="params.pageNum"
            :total="params.total"
            @change="queryList"
        />
    </div>
</template>
<script>
import { QpList } from '@/api/studentExam'
import { downloadDoc } from '@/api/fileManage'

export default {
    inject: ['nextPageReload'],
    data () {
        return {
            note: {
                backgroundImage: 'url(' + require('../../../assets/images/qp12.png') + ')',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                filter: blur('10px')

            },
            roleType: '',
            schoolList: [],
            params: {
                examName: '',
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            list: []
        }
    },
    mounted () {
        this.queryList()
    },
    methods: {
        goStart (row) {
            this.nextPageReload()
            this.$router.push({
                name: 'studentExam',
                query: {
                    type: 5,
                    id: row.qpId,
                    examName: row.qpName
                }
            })
        },
        clearSearch () {
            this.queryList()
        },
        queryList () {
            let params = {
                pageNum: this.params.pageNum,
                pageSize: this.params.pageSize
            }
            QpList(params).then(res => {
                if (res.data.code != '0000') {
                    this.$Message(res.data.data)
                    return
                }
                this.list = res.data.data.list
                this.params.total = res.data.data.total
            })
        },
        handleView (id) {
            this.nextPageReload()
            this.$router.push({
                name: 'caseManageView',
                query: {
                    id: id
                }
            })
        },
        handleAdd () {
            this.nextPageReload()
            this.$router.push({
                name: 'caseManageAdd'
            })
        },
        handleEdit (id) {
            this.nextPageReload()
            this.$router.push({
                name: 'caseManageEdit',
                params: {
                    id: id
                }
            })
        },
        handleDelete (id) {
            console.log(this.store.state.user.roleType)
            this.$Modal.confirm({
                title: '提示',
                content: '确认是否删除？',
                onOk: () => {
                    caseDelete(id).then(res => {
                        if (res.data.code === '0000') {
                            this.$Message.success('删除成功')
                            this.params.pageNum = 1
                            this.queryList()
                        } else {
                            this.$Message.error(res.data.msg)
                        }
                    })
                }
            })
        },
        handleDownload (id) {
            downloadDoc(id, '/case/download')
        }
    }
}
</script>
<style scoped>
.mt10{
    margin-top:10px;
}
.f14{
    font-size: 13px;
}
.pt60{
    padding-top: 60px;
}
.pb10{
    padding-bottom:10px;
}

.bg0 {

     background: url("../../../assets/images/qp31.png" ) no-repeat center ;
     background-size: cover;
}
.bg1 {

     background: url("../../../assets/images/qp32.png" ) no-repeat center ;
     background-size: cover;
}
.bg2 {

     background: url("../../../assets/images/qp33.png" ) no-repeat center ;
     background-size: cover;
}.bg3 {

     background: url("../../../assets/images/qp34.png" ) no-repeat center ;
     background-size: cover;
}
.bg4 {

     background: url("../../../assets/images/qp35.png" ) no-repeat center ;
     background-size: cover;
}
.bg5 {

     background: url("../../../assets/images/qp36.png" ) no-repeat center ;
     background-size: cover;
}

.bg5 .bg-card{
    position: relative;
}
.bg0{

}
.fw{
    font-weight: bold;
    font-size: 18px;
}

</style>
